<!--
 * @Author: changwenqiao
 * @Date: 2021-10-23 16:50:52
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-10-26 19:30:12
 * @Description: 
-->
<template>
  <div>
    <el-page-header
      @back="goBack"
      content="详情页面"
      style="font-size: 12px"
    ></el-page-header>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-col :span="12">
          <div class="demo-basic--circle">
            <div class="block" style="margin-left: 50px">
              <el-avatar :size="60" :src="circleUrl"></el-avatar>
            </div>
          </div>
        </el-col>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="toEditFace"
          >修改头像</el-button
        >
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="toEditFace"
        ></el-button>
      </div>
      <ul>
        <li>登录用户：{{ data.username }}</li>
        <li>用户姓名：{{ data.realname }}</li>
        <li>用户手机：{{ data.telephone }}</li>
        <li>用户性别：{{ data.gender }}</li>
        <li>用户角色：{{ data.roles[0].name }}</li>
        <li>用户生日：{{ data.birth }}</li>
        <li>注册时间：{{ data.registerTime }}</li>
        <li>邮箱：{{ data.email }}</li>
        <li>用户状态：{{ data.status }}</li>
      </ul>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click="toEditDetail"
        >修改个人信息</el-button
      >
    </el-card>

    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="visibleFace">
      <el-form :model="form" ref="ruleForm">
        <el-form-item
          label="头像"
          :label-width="formLabelWidth"
          prop="userFace"
        >
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="form.userFace" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleFace = false">取 消</el-button>
        <el-button type="primary" @click="toSubmit('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 模态框结束 -->

    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="visibleDetail">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="登录用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="姓名"
          :label-width="formLabelWidth"
          prop="realname"
        >
          <el-input v-model="form.realname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
          <el-radio v-model="radio" label="男">男</el-radio>
          <el-radio v-model="radio" label="女">女</el-radio>
        </el-form-item>

        <el-form-item
          label="用户手机"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="用户邮箱"
          :label-width="formLabelWidth"
          prop="telephone"
        >
          <el-input v-model="form.telephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="出生日期"
          :label-width="formLabelWidth"
          prop="birth"
        >
          <div class="block">
            <el-date-picker v-model="value1" type="date" placeholder="选择出生日期">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visibleDetail = false">取 消</el-button>
        <el-button type="primary" @click="toSubmitDetail('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
import { showFileURL, uploadFileURL } from "@/utils/config";
import { pageQuery, saveOrUpdate, deleteById } from "@/api/customer";

export default {
  data() {
    return {
       value1: '',
      formLabelWidth: "100px",
      params: {
        page: 1,
        pageSize: 10,
      },
      form: {},
      total: 0,
      data: {},
      imageUrl: "",
      //图片展示的基础路径
      showFileURL,
      //文件上传的路径
      uploadFileURL,
      circleUrl: "",
      visibleFace: false,
      visibleDetail: false,
      title: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res);
      //展示图片  图片基础路径 + 图片地址
      this.form.photo = showFileURL + res.data.id;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    toEditFace() {
      //显示模态框
      this.visibleFace = true;
      //改变title
      this.title = "更改头像";
    },
    goBack() {
      // 
      // history.go(-1)
      this.$router.go(-1)
      
    },
    toSubmit(ruleForm) {
      this.$refs[ruleForm].validate(async (valid) => {
        if (valid) {
          //校验通过
          let res = await saveOrUpdate(this.form);
          console.log(res);
          this.visibleFace = false;
          this.$message({
            message: res.message,
            type: "success",
          });
        } else {
          this.$message.error("保存失败");
          return false;
        }
      });
    },
    toEditDetail(){
       this.visibleDetail = true;
      this.title = "修改个人信息";
      this.form = { ...this.data };
    },
    toSubmitDetail(ruleForm){
      this.$refs[ruleForm].validate(async (valid) => {
        if (valid) {
          //校验通过
          let res = await saveOrUpdate(this.form);
          console.log(res);
          this.visibleDetail = false;
          this.$message({
            message: res.message,
            type: "success",
          });
        } else {
          this.$message.error("保存失败");
          return false;
        }
      });
    }
  },
  created() {
    this.data = this.$route.query;
    this.circleUrl = this.data.userFace;
    console.log(this.$route.query);
  },
};
</script>

<style lang="scss" scoped>
ul li {
  list-style: none;
  padding: 10px;
}
.box-card {
  padding: 20px;
  margin: 20px 200px;
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
}
</style>